<template>
  <div id="home">
    <div id="playground" class="dweb">
      <div class="header">
        <img src="../assets/vue.png" alt="">
        3.0 练习小盒子
        <div class="divider"></div>
      </div>
      <div class="card-body">
        <img src="../assets/admin.jpg" alt="">
        <div id="userinfo">
          <div class="text">
            <div class="label">昵称: </div>
            九弓子
          </div>
          <div class="text">
            <div class="label">粉丝数: </div>
            {{ fans_total }}
          </div>
          <div class="text">
            <div class="label">今日新增: </div>
            {{ today_add }}
          </div>
          <div class="text">
            <div class="label">昨日: </div>
            {{ yesterday }}
          </div>
          <div class="text">
            <button @click="followUp" type="button" class="btn btn-primary">
              关注
            </button>
            <button type="button" class="btn btn-danger">
              点赞
            </button>
            <button type="button" class="btn btn-success" style="color:#fff;">
              收藏
            </button>
          </div>
          
          
        </div>
        <div class="clear"></div>
      </div>
      
      <div class="divider"></div>
    </div>
  </div>
</template>

<script>
import { ref,reactive } from 'vue'
export default {

  setup() {
    console.log('在created beforcreated之前')
    const nickName = '九弓子'
    const yesterday = 19364
    const fans_total = 19384
    const today_add = ref(20)

    //点击关注
    function followUp() {
      today_add.value += 10
    }

    console.log(today_add)

    return {
      nickName:nickName,
      yesterday:yesterday,
      fans_total:fans_total,
      today_add:today_add,
      followUp:followUp
    }
  }

  // data() {
  //   return {
  //     nickName:'九弓子',
  //     yesterday:19364,
  //     fans_total:19384,
  //     today_add:20
  //   }
  // },
  // methods: {
  //   followUp(){
  //     this.today_add += 10
  //     this.fans_total += 10
  //   }
  // },
}
</script>

<style scoped>
  #home {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 700px;
    padding: 20px;
  }
  #playground {
    width: 700px;
    height: 700px;
  }
  .card-body img {
    width: 200px;
    height: 200px;
    border-radius:100px ;
    float: left;
  }
  #userinfo {
    float: left;
    padding: 20px 50px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
  }
  #userinfo .text {
    margin-top: 10px;
  }
  #userinfo .text button {
    margin-right: 20px;
    font-weight: 700;
  }
  #userinfo .text .label {
    float: left;
    width: 80px;
    font-weight: 800;
    margin-right: 10px;
    color: #fff4d3;
  }
</style>